// Button variants
//
// Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons
.button-variant(@color;@background;@border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  &:visited {
    color: @color;
  }
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @color;
    background-color: @background;
    border-color: darken(@border, 10%);
  }
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    .square(100%);
    background-color: darken(@background, 10%);
    z-index: -1;
    .opacity(0);
    .scale3d(0.7, 1, 1);
    .transition(transform 0.4s, opacity 0.4s;);
    .animation-timing-function(cubic-bezier(0.2, 1, 0.3, 1));
    .rounded(@border-radius-base);
  }
  &,
  &::before {
    .animation-timing-function(cubic-bezier(0.2, 1, 0.3, 1))
  }
  &:hover::before {
    .opacity(1);
    .translate3d(0, 0, 0);
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
    border-color: darken(@border, 12%);
    &::before {
      .opacity(1);
      .translate3d(0, 0, 0);
      background-color: darken(@background, 10%);
    }
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &, &:hover, &:focus, &.focus, &:active, &.active {
      background-color: @background;
      border-color: @border;
    }
  }
  .badge {
    color: @background;
    background-color: @color;
  }
  &.btn-outline {
    background-color: transparent;
    background-image: none;
    border-color: @border;
    color: @background;
    &:hover, &:focus, &:active, &.active {
      background-color: @background;
      color: @color;
    }
  }
}
